<template>
  <div class="person" @click="handler">
      <span>{{ name }}</span>
      <span>{{ yearOfBirth }}</span>
      <span>{{ gender }}</span>
      <span>{{ homeload }}</span>
  </div>
</template>

<script>
export default {
    name: 'Person' ,
    props: {
        name: {
            type: String , // 明确 prop 的类型
            required: true // 在使用组件时是否必须指定该 prop
        },
        // Prop 的大小写命名 (camelCase vs kebab-case)
        yearOfBirth: {
            type: [ Number , String ] , // 明确 prop 的类型
            required: false , // 在使用组件时是否必须指定该 prop
            default: 2002
        },
        gender: {
            type: String ,
            validator( value ) {
                console.log( '接受到的gender值是:' , value  );
                // 这里的 this 并不是当前组件
                // return this.genders.includes( value ); // 错误
                return [ 'male' , 'female' ].includes( value );
            },
            default: 'female'
        },
        homeload: {
            type: Object ,
            required: false ,
            default(){
                return { name: '中国' }
            }
        }
    },
    data(){
        return {
            genders: [ 'male' , 'female' ]
        }
    },
    methods: {
        handler(){
            console.log( this );
            console.log( this.$props );
        }
    }
}
</script>

<style>
.person {
    display: flex ;
    margin: 15px ;
    border: 1px solid blue ;
}

.person>span {
    flex-basis: 200px ;
    text-align: center ;
}
</style>